<template>
  <ocean :use="template" class="theme_box"></ocean>
</template>
<script lang="tsx" setup>
import { useTableTemplate } from '@/ocean';
import { UserAPI } from '@/app/api';
import { useMessage } from 'naive-ui'
import { useMainStore } from "@/store";
import { ref } from 'vue';
let mainStore = useMainStore();

type Column = {
  createTime: string
  foodName: string
  id: 1
  messageInfo: string
  orderNo: "200212013012412"
  phoneNumber: "15517888078"
  status: 1
  storeName: "氢氧食品长宁1111大道店"
  updateTime: "2022-08-28 19:22:57"
  userName: string
}

enum Status {
  '已处理' = 1,
  '未处理',
}

const message = useMessage()

const auditComplaint = (id) => {
  return UserAPI.auditComplaint({ complaintId: id }).then(() => {
    message.success('处理成功')
    template.query();
  })
}


const template = useTableTemplate<Column>('客诉列表', {
  query: data => UserAPI.queryComplaintList(data).then(({ data, total }) => {
    template.table.setData(data);
    template.pagination.setCount(total);
  })
});
template.form.setModel({
  userId: mainStore.userInfo.id
})

template.form.item('状态', 'status').select({ options: [{ label: '已处理', value: 1 }, { label: '未处理', value: 2 }] });

template.table.column('用户名', 'userName');
template.table.column('用户手机号', 'phoneNumber');
template.table.column('留言', 'messageInfo');
template.table.column('状态', 'status').enums(Status);
template.table.define({
  title: '操作',
  render: (row) => (
    <n-space>
      <n-button disabled={row.status == 1} on-click={() => { auditComplaint(row.id) }}>处理</n-button>
    </n-space>
  )
});

template.query()
</script>